<template>
  <Page class="bg-[#f8f9fa] text-[#333] min-h-screen">
    <!-- 头部区域 -->
    <view
      class="header bg-gradient-to-r from-[#165DFF] to-[#1890ff] text-white p-[32rpx] shadow-md sticky top-0 z-[1000] rounded-b-[32rpx]"
    >
      <!-- 返回按钮 -->
      <view
        class="absolute top-[30rpx] left-[30rpx] z-20 w-[60rpx] h-[60rpx] flex items-center justify-center cursor-pointer"
        @click="goBack"
      >
        <IconFont
          font-class-name="iconfont"
          class-prefix="icon"
          name="left"
          size="20"
          color="#ffffff"
        />
      </view>
      <view class="top-bar flex justify-between items-center mb-[16rpx]">
        <view class="location flex items-center text-[24rpx]">
          <IconFont name="icon-location" class="mr-[8rpx] text-[28rpx]" />
          <text id="current-city" class="font-bold">南宁市</text>
        </view>
        <view class="user-info flex items-center">
          <view
            class="avatar w-[44rpx] h-[44rpx] rounded-full bg-white text-[#165DFF] flex items-center justify-center mr-[12rpx] font-bold text-[24rpx]"
            >张</view
          >
          <text class="user-name text-[28rpx] font-bold">张三</text>
        </view>
      </view>
      <view class="id-display text-[22rpx] opacity-80 font-bold">
        <text>平台ID: </text>
        <text id="user-id">NF123456</text>
      </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-container p-[24rpx_32rpx] bg-white">
      <view
        class="search-box flex bg-[#f5f5f5] rounded-[32rpx] p-[12rpx_24rpx] items-center shadow-sm"
      >
        <IconFont name="icon-search" class="text-[28rpx] text-[#999]" />
        <nut-input
          class="flex-1 bg-transparent border-none outline-none text-[26rpx] ml-[16rpx]"
          placeholder="搜索日结任务、地点..."
          v-model="searchText"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 分类区域 -->
    <view
      class="categories flex overflow-x-auto p-[16rpx_32rpx] bg-white gap-x-[16rpx]"
    >
      <view
        v-for="(category, index) in categories"
        :key="index"
        class="category-item flex flex-col items-center min-w-[88rpx] p-[12rpx_8rpx] rounded-[16rpx] cursor-pointer transition-all duration-300"
        :class="{
          'bg-[#e6f7ff] font-bold text-[#165DFF] shadow':
            activeCategory === index,
          'text-[#999]': activeCategory !== index,
        }"
        @click="
          activeCategory = index;
          handleCategoryClick(category.name);
        "
      >
        <view
          class="category-icon w-[48rpx] h-[48rpx] rounded-full bg-[#f0f5ff] flex items-center justify-center text-[28rpx] mb-[8rpx] text-[#165DFF]"
        >
          <IconFont :name="category.icon" />
        </view>
        <view class="category-name text-[22rpx] text-center">{{
          category.name
        }}</view>
      </view>
    </view>

    <!-- 优先级筛选 -->
    <!-- <view
      class="priority-filter p-[16rpx_32rpx] bg-white border-t border-b border-[#eee] gap-x-[16rpx] rounded-[24rpx] mb-[16rpx]"
    >
      <view class="priority-title text-[24rpx] mb-[8rpx] text-[#666]"
        >优先显示</view
      >
      <view class="priority-buttons flex gap-x-[16rpx]">
        <view
          v-for="(filter, index) in priorityFilters"
          :key="index"
          class="priority-btn flex-1 p-[12rpx_8rpx] bg-[#f5f5f5] rounded-[16rpx] text-center text-[24rpx] cursor-pointer font-medium transition-all duration-200"
          :class="{
            'bg-[#165DFF] text-white font-bold shadow': activeFilter === index,
            'text-[#999]': activeFilter !== index,
          }"
          @click="
            activeFilter = index;
            handleFilterClick(filter);
          "
        >
          {{ filter }}
        </view>
      </view>
    </view> -->

    <!-- 订单列表 -->
    <view
      class="order-list p-[24rpx_32rpx] min-h-[calc(100vh-420rpx)] flex flex-col gap-y-[20rpx]"
    >
      <view
        v-for="(order, index) in orders"
        :key="index"
        class="order-card bg-white rounded-[24rpx] p-[24rpx] shadow-md relative flex flex-col"
        :class="
          order.urgent
            ? 'border-l-[8rpx] border-l-[#FF4D4F]'
            : 'border-l-[8rpx] border-l-[#165DFF]'
        "
      >
        <view class="order-header flex justify-between mb-[16rpx] items-center">
          <view class="order-title text-[28rpx] font-bold flex-1 text-[#222]">{{
            order.title
          }}</view>
          <view
            class="order-badge text-[22rpx] px-[16rpx] py-[6rpx] rounded-[16rpx] font-bold"
            :class="
              order.urgent
                ? 'bg-[#fff2f0] text-[#FF4D4F]'
                : 'bg-[#e6f7ff] text-[#165DFF]'
            "
            >{{ order.badgeText }}</view
          >
        </view>
        <view
          class="order-meta flex mb-[12rpx] flex-wrap gap-x-[16rpx] gap-y-[8rpx]"
        >
          <view class="meta-item flex items-center text-[22rpx] text-[#666]">
            <IconFont name="icon-location" class="mr-[8rpx] text-[#165DFF]" />
            <text>{{ order.location }}</text>
          </view>
          <!-- <view class="meta-item flex items-center text-[22rpx] text-[#666]">
            <IconFont name="icon-distance" class="mr-[8rpx] text-[#165DFF]" />
            <text>{{ order.distance }}</text>
          </view> -->
          <view class="meta-item flex items-center text-[22rpx] text-[#666]">
            <IconFont name="icon-clock" class="mr-[8rpx] text-[#165DFF]" />
            <text>{{ order.duration }}</text>
          </view>
        </view>
        <view
          class="order-description text-[22rpx] text-[#666] mb-[16rpx] leading-[1.6] bg-[#f9f9f9] p-[16rpx] rounded-[12rpx]"
          >{{ order.description }}</view
        >
        <view class="order-footer flex justify-between items-center mt-[16rpx]">
          <view>
            <view class="order-payment text-[32rpx] font-bold text-[#fa541c]">{{
              order.payment
            }}</view>
            <view class="order-time text-[20rpx] text-[#999]">{{
              order.time
            }}</view>
          </view>
          <nut-button
            class="btn-take px-[32rpx] py-[16rpx] bg-[#165DFF] text-white border-none rounded-[16rpx] text-[26rpx] font-bold shadow-md min-h-[60rpx]"
            @click="handleTakeOrder(order.title)"
          >
            立即申请
          </nut-button>
        </view>
      </view>
    </view>

    <!-- 浮动消息按钮 -->
    <!-- <view class="float-message fixed bottom-[120rpx] left-[32rpx] w-[88rpx] h-[88rpx] rounded-full bg-gradient-to-br from-[#36cfc9] to-[#13c2c2] text-white flex items-center justify-center text-[44rpx] shadow-lg cursor-pointer z-[999]">
      <IconFont name="icon-comment" />
      <view class="badge-notification absolute top-[-8rpx] right-[-8rpx] bg-[#FF4D4F] text-white rounded-full w-[32rpx] h-[32rpx] text-[20rpx] flex items-center justify-center font-bold">3</view>
    </view> -->

    <!-- 普通用户 TabBar -->
    <!-- <view class="tabbar fixed bottom-0 left-0 w-full h-[88rpx] bg-white border-t border-[#eee] flex justify-around items-center z-[1000]" :class="{ 'hidden': activeRole !== 'user' }">
      <view 
        v-for="(tab, index) in userTabs" 
        :key="index"
        class="tab-item flex flex-col items-center justify-center flex-1 h-full transition-all duration-300 cursor-pointer relative"
        :class="{ 'active text-[#165DFF] font-bold border-b-[4rpx] border-[#165DFF] bg-[#f0f8ff]': activeTab === index, 'text-[#999]': activeTab !== index }"
        @click="activeTab = index"
      >
        <view class="tab-icon text-[32rpx] mb-[6rpx]">
          <IconFont :name="tab.icon" />
        </view>
        <view class="tab-label text-[24rpx]">{{ tab.label }}</view>
      </view>
    </view> -->
  </Page>
</template>

<script setup>
import { ref } from "vue";
import Taro  from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { Input as nutInput, Button as nutButton } from "@nutui/nutui-taro";

// 返回上一页
const goBack = () => {
  Taro.navigateBack({
    delta: 1,
  });
};

// 搜索文本
const searchText = ref("");

// 分类数据
const categories = [
  { name: "餐饮", icon: "icon-restaurant" },
  { name: "促销", icon: "icon-promotion" },
  { name: "搬运", icon: "icon-move" },
  { name: "配送", icon: "icon-delivery" },
  { name: "家政", icon: "icon-housekeeping" },
  { name: "家教", icon: "icon-teacher" },
  { name: "礼仪", icon: "icon-etiquette" },
  { name: "维修", icon: "icon-repair" },
];
const activeCategory = ref(0);

// 优先级筛选
const priorityFilters = ["全部订单", "急招订单"];
const activeFilter = ref(0);

// 订单数据
const orders = [
  {
    title: "餐厅晚班服务员",
    urgent: true,
    badgeText: "急聘",
    location: "青秀区万象城",
    distance: "距离1.5km",
    duration: "4小时/天",
    description:
      "急需3名晚班服务员，工作时间18:00-22:00，主要工作为服务顾客、上菜、清理桌面。有经验者优先。",
    payment: "¥200",
    time: "今日17:30开始",
  },
  {
    title: "超市理货员",
    urgent: false,
    badgeText: "新发布",
    location: "西乡塘区沃尔玛",
    distance: "距离3.2km",
    duration: "8小时/天",
    description:
      "超市早班理货员，工作时间7:00-15:00，要求工作细心，有责任心，能独立完成商品上架理货工作。",
    payment: "¥150",
    time: "每天需1名",
  },
  {
    title: "展会礼仪接待",
    urgent: true,
    badgeText: "急聘",
    location: "国际会展中心",
    distance: "距离4.8km",
    duration: "6小时/天",
    description:
      "急需展会礼仪10名（女性优先），要求162cm以上，形象气质佳，普通话标准，负责展会引导接待。",
    payment: "¥300",
    time: "明日8:30开始",
  },
  {
    title: "物流分拣员",
    urgent: false,
    badgeText: "新发布",
    location: "高新区京东物流园",
    distance: "距离6.5km",
    duration: "5小时/班",
    description:
      "急招晚班分拣员，工作时间20:00-次日1:00，负责快递包裹分类、扫描、装车。",
    payment: "¥180",
    time: "每天需5名",
  },
  {
    title: "家教辅导（初中数学）",
    urgent: false,
    badgeText: "新发布",
    location: "江南区荣宝华商城",
    distance: "距离2.1km",
    duration: "2小时/次",
    description:
      "辅导初一学生数学，每周二、四晚上19:30-21:30，要求有教学经验，有耐心，擅长解题思路讲解。",
    payment: "¥100/次",
    time: "本周开始",
  },
];

// TabBar数据
const userTabs = [
  { icon: "icon-home", label: "接单广场" },
  { icon: "icon-tasks", label: "悬赏大厅" },
  { icon: "icon-education", label: "能力提升" },
  { icon: "icon-factory", label: "工厂招聘" },
  { icon: "icon-user", label: "个人中心" },
];

const workerTabs = [
  { icon: "icon-taskhall", label: "任务大厅" },
  { icon: "icon-wallet", label: "钱包" },
  { icon: "icon-record", label: "接单记录" },
  { icon: "icon-credit", label: "信用评级" },
  { icon: "icon-user", label: "我的" },
];

const merchantTabs = [
  { icon: "icon-data", label: "店铺数据" },
  { icon: "icon-publish", label: "任务发布" },
  { icon: "icon-customers", label: "客户管理" },
  { icon: "icon-orders", label: "订单处理" },
  { icon: "icon-user", label: "我的" },
];

// 活跃状态
const activeRole = ref("user"); // user, worker, merchant
const activeTab = ref(0);

// 处理搜索
const handleSearch = () => {
  Taro.showToast({
    title: `搜索: ${searchText.value}`,
    icon: "none",
    duration: 2000,
  });
};

// 处理分类点击
const handleCategoryClick = (categoryName) => {
  Taro.showToast({
    title: `已筛选: ${categoryName}类订单`,
    icon: "none",
    duration: 2000,
  });
};

// 处理筛选点击
const handleFilterClick = (filterType) => {
  Taro.showToast({
    title: `已按${filterType}筛选订单`,
    icon: "none",
    duration: 2000,
  });
};

// 处理接单
const handleTakeOrder = (taskTitle) => {
  Taro.showToast({
    title: `您已申请接单: ${taskTitle}\n等待雇主确认中...`,
    icon: "none",
    duration: 2000,
  });
};

// 消息按钮点击
const handleMessageClick = () => {
  Taro.showToast({
    title: "查看最新任务通知",
    icon: "none",
    duration: 2000,
  });
};
</script>
